<template>
  <div class="container" id="box"
       @touchstart="startTouch"
       @touchend="endTouch"
       @touchmove="moveTouch"
  >
    <div class="list">
      <div class="list_item" v-for="(i,idx) in list" :key="i">
        <video
          :id="`video${currentIndex}`"
          v-if="currentIndex === idx"
          :muted="customMuted"
          :src="videoSrc"
          autoplay
          loop
          playsinline
          controls
          webkit-playsinline
          x5-video-player-type="h5"
        ></video>
      </div>
    </div>
  </div>
  <div class="cancelMuted"><span @click="cancelMuted">取消静音播放{{currentIndex}}</span></div>
</template>
<script setup>
import { ref, computed, watch, onMounted, nextTick } from "vue";
import wx from 'weixin-js-sdk'
const list = ref([1,2,3,4])//数据存储数组
const currentIndex = ref(0)//计数值，跟数组长度对比后加载更多数据
const customMuted = ref(true)
const cancelMuted = () => {
  customMuted.value = false
}
watch(() => currentIndex.value,() => {
  if(currentIndex.value === list.value.length - 1){
    list.value = [...list.value,...[1,2,3]]
  }
},{
  immediate:true
})

// https://www.runoob.com/try/demo_source/movie.ogg
// 视频地址
const videoSrc = computed(() => {
  return currentIndex.value % 2 === 0 ? 'http://oss.handi.fit/videos/feedback/202307061103565244306701524541.mp4' : 'http://oss.handi.fit/videos/feedback/202306291741557895616712952449.mp4'
})
const moveNumber = ref(0)
const pageHeight = ref(0)//页面翻转高度
onMounted(() => {
  pageHeight.value = document.getElementById('box').offsetHeight
  wx.config({
    debug: false,
    appId: 'wx123456789',
    timestamp: '',
    nonceStr: '',
    signature: '',
    jsApiList: []
  })
// 上面配置错误也无所谓的，即使配置失败，也会走 ready 函数
// 主要目的就是为了走 ready 函数
  wx.ready(() => {
    // 取得播放器对象，调用播放事件
    document.getElementById(`video${currentIndex.value}`).play()
  })
})
const cssParams = computed(() => {
  return `${moveNumber.value}px`
})
const count = computed(() => {
  return (list.value.length - 1) * - pageHeight.value
})

let startLocation = 0
let endLocation = 0
const startTouch = (e) => {
  startLocation = e.touches[0].screenY
}
const moveTouch = (e) => {
  endLocation = e.touches[0].screenY
}
const endTouch = () => {
  if(startLocation < endLocation){
    console.log('下拉');
    if(moveNumber.value === 0){
      return
    }
    currentIndex.value --
    moveNumber.value +=  pageHeight.value
    document.getElementById('video').play()
    nextTick(() => {
      document.getElementById('video').play()
    })
  }else{
    console.log('上翻');
    if(moveNumber.value === count.value) return
    currentIndex.value ++
    moveNumber.value -=  pageHeight.value
    setTimeout(() => {
      nextTick(() => {
        wx.config({
          debug: false,
          appId: 'wx123456789',
          timestamp: '',
          nonceStr: '',
          signature: '',
          jsApiList: []
        })
// 上面配置错误也无所谓的，即使配置失败，也会走 ready 函数
// 主要目的就是为了走 ready 函数
        wx.ready(() => {
          // 取得播放器对象，调用播放事件
          document.getElementById(`video${currentIndex.value}`).play()
        })
      })

    },1000)
  }
}


</script>
<style scoped lang="scss">
.container{
  height:100vh;
  overflow: hidden;
}
.list{
  transform: translateY(v-bind('cssParams'));
  transition-duration: 500ms;
  &_item{
    position: relative;
    z-index:10;
    height:100vh;
    background: #000000;
    color:#ffffff;
    video{
      width:100%;
      height:100%;
    }
  }
}
.cancelMuted{
  position: fixed;
  top:100px;
  left:100px;
  color:red;
  z-index:1000;
}
</style>